<script lang="ts" setup>
import { whManagerBsTbEnterpriseGetListUsingPost } from '@/genapi/wh';
import { computedLoading } from '@/hooks/computed-loading';

import { injectState } from '../state';

defineOptions({ name: 'Filters' });

const {
  filter,
  page: { isLoading },
} = injectState()!;

const initial = { ...toRaw(filter.value) };
const data = ref({ ...initial });

const search = () => {
  filter.value = { ...toRaw(data.value) };
};

const reset = () => {
  data.value = { ...initial };
};

const [state] = computedLoading(async () => {
  const { data } = await whManagerBsTbEnterpriseGetListUsingPost({ data: {} });
  return data?.map((item) => ({ label: item.name, value: item.id! })) ?? [];
});

const createTimeRange = computed<any>({
  get() {
    return data.value.startCreateTime
      ? [data.value.startCreateTime!, data.value.endCreateTime!]
      : undefined;
  },
  set(value) {
    data.value.startCreateTime = value?.[0];
    data.value.endCreateTime = value?.[1];
  },
});
</script>

<template>
  <el-form class="filter-form" inline :model="data" :disabled="isLoading">
    <el-form-item label="企业名称">
      <el-select-v2
        v-model="data.enterpriseId"
        clearable
        :options="state ?? []"
        class="w-240px!"
        placeholder="全部"
      />
    </el-form-item>
    <el-form-item>
      <el-date-picker
        v-model="createTimeRange"
        clearable
        type="daterange"
        value-format="YYYY-MM-DD"
        format="YYYY-MM-DD"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </el-form-item>

    <el-form-item>
      <el-divider direction="vertical" h="32px!" m="r-22px!" />
      <el-button type="primary" :loading="isLoading" @click="search">
        <template #icon>
          <el-icon class="i-custom:search" />
        </template>
        查询
      </el-button>
      <el-button @click="reset">
        <template #icon>
          <el-icon class="i-custom:reset" />
        </template>
        重置
      </el-button>
    </el-form-item>
  </el-form>
</template>
